<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub风格围棋游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
            background-color: #f6f8fa;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #24292e;
        }

        .game-container {
            background: #ffffff;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(27, 31, 35, 0.04);
            width: 100%;
            max-width: 800px;
            padding: 24px;
            text-align: center;
        }

        .game-header {
            margin-bottom: 24px;
            border-bottom: 1px solid #eaecef;
            padding-bottom: 16px;
        }

        .game-header h1 {
            color: #24292e;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .game-header p {
            color: #586069;
            font-size: 14px;
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
            padding: 8px 0;
            border-bottom: 1px solid #eaecef;
            color: #586069;
            font-size: 14px;
        }

        .player-turn {
            font-weight: 500;
        }

        .player-black {
            color: #000;
        }

        .player-white {
            color: #0366d6;
        }

        .game-board {
            margin: 0 auto;
            background: #f0e6d2;
            border: 2px solid #d4c19c;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .controls {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            background: #2ea44f;
            border: 1px solid rgba(27, 31, 35, 0.15);
            border-radius: 6px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .btn:hover {
            background: #2c974b;
        }

        .btn.reset {
            background: #f6f8fa;
            color: #24292e;
            border: 1px solid #e1e4e8;
        }

        .btn.reset:hover {
            background: #e1e4e8;
        }

        .rules {
            margin-top: 20px;
            padding: 15px;
            background: #f6f8fa;
            border-radius: 6px;
            text-align: left;
            font-size: 13px;
            color: #586069;
        }

        .rules h3 {
            margin-bottom: 10px;
            color: #24292e;
        }

        .rules ul {
            padding-left: 20px;
        }

        .rules li {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="game-container">
    <div class="game-header">
        <h1>GitHub风格围棋游戏</h1>
        <p>使用HTML5 Canvas实现的经典围棋游戏</p>
    </div>

    <div class="game-info">
        <div class="current-player">
            当前玩家: <span id="current-player" class="player-black">黑子</span>
        </div>
        <div class="game-status">
            状态: <span id="game-status">游戏中</span>
        </div>
    </div>

    <canvas id="go-board" class="game-board" width="600" height="600"></canvas>

    <div class="controls">
        <button class="btn" id="pass-btn">虚手</button>
        <button class="btn reset" id="reset-btn">重新开始</button>
    </div>

    <div class="rules">
        <h3>游戏规则</h3>
        <ul>
            <li>黑子先行，双方轮流在棋盘交叉点落子</li>
            <li>当一方的棋子被完全包围时，该棋子被提走</li>
            <li>当双方连续虚手时，游戏结束</li>
            <li>占地多的一方获胜</li>
        </ul>
    </div>
</div>

<script>
    // 棋盘配置
    const BOARD_SIZE = 19; // 19x19标准围棋棋盘
    const CELL_SIZE = 30; // 每个格子的像素大小
    const STONE_RADIUS = 14; // 棋子半径

    // 游戏状态
    let currentPlayer = 1; // 1为黑子，2为白子
    let gameBoard = [];
    let gameActive = true;

    // 获取Canvas元素和绘图上下文
    const canvas = document.getElementById('go-board');
    const ctx = canvas.getContext('2d');

    // 初始化游戏
    function initGame() {
        // 初始化棋盘数组
        gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));

        // 绘制棋盘
        drawBoard();

        // 更新界面
        updateUI();

        // 添加点击事件
        canvas.addEventListener('click', handleBoardClick);

        // 添加按钮事件
        document.getElementById('pass-btn').addEventListener('click', passTurn);
        document.getElementById('reset-btn').addEventListener('click', resetGame);
    }

    // 绘制棋盘
    function drawBoard() {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景
        ctx.fillStyle = '#f0e6d2';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制网格线
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 1;

        // 绘制垂直线
        for (let i = 0; i < BOARD_SIZE; i++) {
            const x = i * CELL_SIZE + CELL_SIZE;
            ctx.beginPath();
            ctx.moveTo(x, CELL_SIZE);
            ctx.lineTo(x, CELL_SIZE * (BOARD_SIZE - 1) + CELL_SIZE);
            ctx.stroke();
        }

        // 绘制水平线
        for (let i = 0; i < BOARD_SIZE; i++) {
            const y = i * CELL_SIZE + CELL_SIZE;
            ctx.beginPath();
            ctx.moveTo(CELL_SIZE, y);
            ctx.lineTo(CELL_SIZE * (BOARD_SIZE - 1) + CELL_SIZE, y);
            ctx.stroke();
        }

        // 绘制天元和星位
        drawStarPoints();

        // 绘制已落子
        drawStones();
    }

    // 绘制天元和星位
    function drawStarPoints() {
        const starPoints = [
            [3, 3], [3, 9], [3, 15],
            [9, 3], [9, 9], [9, 15],
            [15, 3], [15, 9], [15, 15]
        ];

        ctx.fillStyle = '#000';
        starPoints.forEach(point => {
            const [x, y] = point;
            const px = x * CELL_SIZE + CELL_SIZE;
            const py = y * CELL_SIZE + CELL_SIZE;
            ctx.beginPath();
            ctx.arc(px, py, 3, 0, Math.PI * 2);
            ctx.fill();
        });
    }

    // 绘制棋子
    function drawStones() {
        for (let row = 0; row < BOARD_SIZE; row++) {
            for (let col = 0; col < BOARD_SIZE; col++) {
                const stone = gameBoard[row][col];
                if (stone !== 0) {
                    drawStone(row, col, stone);
                }
            }
        }
    }

    // 绘制单个棋子
    function drawStone(row, col, type) {
        const x = col * CELL_SIZE + CELL_SIZE;
        const y = row * CELL_SIZE + CELL_SIZE;

        ctx.beginPath();
        ctx.arc(x, y, STONE_RADIUS, 0, Math.PI * 2);

        if (type === 1) { // 黑子
            // 创建渐变
            const gradient = ctx.createRadialGradient(
                x - STONE_RADIUS/3, y - STONE_RADIUS/3, 1,
                x, y, STONE_RADIUS
            );
            gradient.addColorStop(0, '#666');
            gradient.addColorStop(1, '#000');
            ctx.fillStyle = gradient;
        } else { // 白子
            // 创建渐变
            const gradient = ctx.createRadialGradient(
                x - STONE_RADIUS/3, y - STONE_RADIUS/3, 1,
                x, y, STONE_RADIUS
            );
            gradient.addColorStop(0, '#fff');
            gradient.addColorStop(1, '#ddd');
            ctx.fillStyle = gradient;

            // 绘制边框
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            ctx.stroke();
        }

        ctx.fill();
    }

    // 处理棋盘点击事件
    function handleBoardClick(event) {
        if (!gameActive) return;

        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        // 计算点击的交叉点
        const col = Math.round((x - CELL_SIZE) / CELL_SIZE);
        const row = Math.round((y - CELL_SIZE) / CELL_SIZE);

        // 检查点击是否在有效范围内
        if (row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE) {
            placeStone(row, col);
        }
    }

    // 落子
    function placeStone(row, col) {
        // 检查该位置是否为空
        if (gameBoard[row][col] !== 0) return;

        // 放置棋子
        gameBoard[row][col] = currentPlayer;

        // 重绘棋盘
        drawBoard();

        // 切换玩家
        currentPlayer = currentPlayer === 1 ? 2 : 1;

        // 更新界面
        updateUI();
    }

    // 虚手
    function passTurn() {
        if (!gameActive) return;

        // 切换玩家
        currentPlayer = currentPlayer === 1 ? 2 : 1;

        // 更新界面
        updateUI();

        // 这里可以添加连续虚手判断游戏结束的逻辑
    }

    // 重新开始游戏
    function resetGame() {
        currentPlayer = 1;
        gameActive = true;
        document.getElementById('game-status').textContent = '游戏中';
        initGame();
    }

    // 更新界面信息
    function updateUI() {
        const playerElement = document.getElementById('current-player');
        playerElement.textContent = currentPlayer === 1 ? '黑子' : '白子';
        playerElement.className = currentPlayer === 1 ? 'player-black' : 'player-white';
    }

    // 页面加载完成后初始化游戏
    window.addEventListener('load', initGame);
</script>
</body>
</html>